var lis = $$("#table").getElementsByTagName("tbody")[0].children;
//调用初始化方法 initDrag(选择器,一般元素颜色，兑换位置的元素原色)
initDrag(lis, "rgba(185,236,197,0.5)", "rgba(84,223,117,0.5)");

window.onload = function () {
    //删除选中元素
    $$("#del_checked").onclick = function () {
        var msgP = "";
        var checkbox = getSelectElem();
        var isDele;
        if (checkbox == "") {
            isDele = window.confirm("请先选择要删除的项")
        } else {
            isDele = window.confirm("是否删除id是[" + checkbox + "]的元素")
            if (isDele) {
                getSelectElem(isDele);
            } else {
                getSelectElem(-1);
            }
        }
    }
    //onclick  td和input关联
    realSelect();
}


//onclick  td和input关联选中
function realSelect() {
    for (var i = 0; i < $$("td").length; i++) {
        var input = $$("td")[i].getElementsByTagName("input")[0];
        if (input && input.type && input.type === "checkbox") {
            $$("td")[i].onclick = function () {
                var thisInput = this.getElementsByTagName("input")[0];
                thisInput.checked = !thisInput.checked;
            }
            input.onclick = function () {
                var isChecked = this.checked;
                this.checked = !isChecked;
            }
        }
    }
}

//获取选中的行元素
function getSelectElem(isDeleTem) {
    var checkboxArr = [];
    var trs = $$("#tbody").getElementsByTagName("tr");
    var tem = true;
    var tem1 = true;
    for (var i = 0; i < trs.length; i++) {
        var tds = trs[i].getElementsByTagName("td");
        var input = tds[0].getElementsByTagName("input")[0];
        if (input && input.checked) {
            //选中-->非选中
            if (isDeleTem === -1) {
                input.checked = false;
            } else if (isDeleTem === true) {	//移除行
                trs[i].style.display = "none";
                input.checked = false;
            } else {
                checkboxArr.push(trs[i].getElementsByTagName("td")[1].innerText);
            }
        }
    }
    if (isDeleTem === undefined) return checkboxArr;
}

//初始化方法
function initDrag(lis, oBac, nearBac) {
    arr = [];
    for (var i = 0; i < lis.length; i++) {
        var top_ = lis[i].offsetTop;
        var left_ = lis[i].offsetLeft;
        lis[i].style.top = top_ + "px";
        lis[i].style.left = left_ + "px";
        lis[i].index = i;
        arr.push([top_, left_]);
    }
    for (var i = 0; i < lis.length; i++) {
        lis[i].style.position = "absolute";//top,left要和定位分开设置
        drag(lis, lis[i], oBac, nearBac)
    }
}

//拖拽
function drag(lis, elem, oBac, nearBac) {
    var isMove = false;
    elem.onmousedown = function (e) {
        elem.style.cursor = "move";
        var x1 = e.clientX;
        var y1 = e.clientY;
        var offset_x = elem.offsetLeft;
        var offset_y = elem.offsetTop;
        document.onmousemove = function (e) {
            isMove = true;
            var x2 = e.clientX;
            var y2 = e.clientY;
            var new_x = x2 - x1 + offset_x;
            var new_y = y2 - y1 + offset_y;
            elem.style.left = new_x + "px";
            elem.style.top = new_y + "px";
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor = oBac;
                //最近&&碰撞 --> 变色
                var near_li = nearLi(lis, elem);
                var bol = into(elem, near_li);
                if (near_li && bol) {
                    near_li.style.backgroundColor = nearBac;
                }
            }
        }
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
            elem.style.cursor = "default";
            //对换位置
            var near_li = nearLi(lis, elem);
            var bol = into(elem, near_li);
            if (near_li && bol && isMove) {
                $(elem).animate({
                    top: arr[near_li.index][0],
                    left: arr[near_li.index][1]
                }, 500, "swing")
                $(near_li).animate({
                    top: arr[elem.index][0],
                    left: arr[elem.index][1]
                }, 500, "swing")
                /*
                elem.style.top = arr[near_li.index][0] + "px";
                elem.style.left = arr[near_li.index][1] + "px";
                near_li.style.top = arr[elem.index][0] + "px";
                near_li.style.left = arr[elem.index][1] + "px";
                */
                var this_index = elem.index
                elem.index = near_li.index;
                near_li.index = this_index;
                near_li.style.backgroundColor = oBac;
            } else {
                $(elem).animate({
                    top: arr[elem.index][0],
                    left: arr[elem.index][1]
                })
                /*
                elem.style.top = arr[elem.index][0] + "px";
                elem.style.left = arr[elem.index][1] + "px";
                */
            }
        }
        return false;
    }
}

//获取元素
function $$(selector) {
    if (/^#/.test(selector) && selector.replace("#", "")) {
        return document.getElementById(selector.replace("#", "").trim());
    } else if (/^\./.test(selector) && selector.replace(".", "")) {
        return document.getElementsByClassName(selector.replace(".", "").trim())
    } else if (/^[^#\.]/.test(selector)) {
        return document.getElementsByTagName(selector.trim())
    }
    return undefined;
}

//碰撞
function into(elem, other) {
    var this_left = elem.offsetLeft;
    var this_top = elem.offsetTop;
    var this_bottom = elem.offsetTop + elem.offsetHeight;
    var this_right = elem.offsetLeft + elem.offsetWidth;

    var other_left = other.offsetLeft;
    var other_top = other.offsetTop;
    var other_bottom = other.offsetTop + other.offsetHeight;
    var other_right = other.offsetLeft + other.offsetWidth;
    if (other_left + 5 > this_right || other_right - 5 < this_left || other_top + 5 > this_bottom || other_bottom - 5 < this_top) {
        return false;
    } else {
        return true;
    }
}

//找到最近的一个li
function nearLi(lis, elem) {
    var idnex = -1;
    var temNum = +Infinity;
    for (var i = 0; i < lis.length; i++) {
        var near_li = Math.pow(elem.offsetTop - lis[i].offsetTop, 2) + Math.pow(elem.offsetLeft - lis[i].offsetLeft, 2);
        if (near_li < temNum && lis[i] != elem) {
            temNum = near_li;
            index = i;
        }
    }
    if (index != -1) {
        return lis[index];
    } else {
        return false;
    }
}